<script setup lang="ts">

// 导入库
import { invoke } from "@tauri-apps/api/core";
// import { reactive } from "vue";
import { reactive, ref } from 'vue';
import { FormInstance } from 'element-plus';
import { InternalRuleItem, Value } from "async-validator";
invoke("open_devtools");


const onClick= () =>{
  window.location.href = "http://localhost:3421"
}


// 获取到远程输入框的值
const inputRef = ref<HTMLInputElement>()

// 表格引用对象
const formRef = ref<FormInstance>();

// 定义 vue 响应式数据
const data = reactive<{
  eleValue: string // 获取 element 输入框 值
}>({
  eleValue: ""
});

// 定义获取 form 变量的 model 
const formModel = reactive<{
  account: string // 账户
  password: string // 密码
}>({
  account: "",
  password: ""
});
// 打开控制台
const onOpenDevTools = () => {
  invoke("open_devtools");
}
const onOutputValue = () => {
  // `` 表示字符串的使用模板，如果要输出值，则使用 ${变量} 的用法 
  console.log(`远程输入框的值: ${inputRef.value.value}, element 输入框的值：${data.eleValue}`)
}

// 提交表单
const onSubmit = async ()=>{
  // 对输入参数进行验证
  const validate = await formRef.value.validate();
  if (!validate) {
    return;
  }
  // 输入表单的值
  console.log(formModel)
};
// 校验密码长度
// 自定义表单规则器的写入都是固定的
//  value 值就是输入框对应的值，都是为字符串
const passwordLengthValidator = (rule: InternalRuleItem, value: Value, callback: (error?: string | Error) => void) =>{
  if(value.length >= 6) {
    // 负责规则，直接调用 callback
    callback();
  } else {
    // 不符合规则，通过 new Error 返回错误
    callback(new Error("密码长度不能小于 6"));
  }
};



</script>

<template>

<div class="logo vertical-layout-center">
 <img src="@/assets/icons/微信图片_20241220163545.jpg"  alt=""  style="height: 150px;width: 150px;margin-top: 5px;">
 </div>

<div class="main-page">电子商务数据查询</div>
      
  <div class="form-wrapper">
    <el-form ref="formRef" :model="formModel">
      <!-- form 表单的成员 -->
      <!-- label 标签名 prop 要和 formModel 中的变量一致， rules 校验规则 -->
      <el-form-item prop="account" label="账号" :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }]">
        <el-input v-model="formModel.account" placeholder="请输入用户名/手机号" />
      </el-form-item>
      <el-form-item prop="password" label="暗号" :rules="[
        { required: true, message: '暗号不能为空', trigger: 'blur' }
      ]">
        <!-- type 设置为密码类型 -->
        <el-input type="password" v-model="formModel.password" placeholder="请输入暗号" />
      </el-form-item>
      <!-- 设置为水平方向的弹性布局 -->
      <el-form-item class="horzontal-layout">
        <!-- span 元素占满当前空间 -->
        <span class="flex-1" />
        <!-- 元素被挤到最右边 -->
       
      </el-form-item>
    </el-form>
  </div>
   <!-- 设置为水平方向的弹性布局
   <el-form-item class="horzontal-layout"> -->
        <!-- span 元素占满当前空间 -->
        <span class="flex-1" />
  <button class="btn_1" @click="onClick">超级启动</button>
   <!-- </el-form-item> -->

  
  

   
</template>

<style lang="scss" scoped>
 .btn_1{
  color: black;
  height: 50px;
  width: 50px;
  margin-left: 600px;
  &:hover{
    background: pink;
    border:5px solid blue;
  }
 }
 .form-wrapper {
  margin-top: 20px;
  margin-left: 200px;
  width: 400px;
}
 .main-page{
  margin-top: 20px;
  margin-left:350px;
}

.vertical-layout-center {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
  }


</style>